<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 搜索部分 -->
      <el-form ref="form" :model="form">
        <!-- 新增试题按钮 -->
        <el-row type="flex" justify="end">
          <el-button
            type="success"
            success
            size="small"
            @click="$router.push({ path: '/questions/new' })"
          >
            <i class="el-icon-edit"></i>
            新增试题
          </el-button>
        </el-row>
        <!-- 搜索第一行 -->
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科" prop="subjectID" size="mini">
              <el-select v-model="form.subjectID" placeholder="请选择">
                <el-option
                  v-for="item in subjectSimpleList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录" prop="catalogID" size="mini">
              <el-select v-model="form.catalogID" placeholder="请选择">
                <el-option
                  v-for="item in directorysSimpleList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签" prop="tags" size="mini">
              <el-select v-model="form.tags" placeholder="请选择">
                <el-option
                  v-for="item in tagsSimpleList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键词" prop="keyword">
              <el-input
                v-model="form.keyword"
                size="mini"
                style="width: 190px"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 搜索第二行 -->
        <el-row>
          <el-col :span="6">
            <el-form-item label="试题类型" prop="questionType" size="mini">
              <el-select v-model="form.questionType" placeholder="请选择">
                <el-option
                  v-for="item in questionTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度" prop="difficulty" size="mini">
              <el-select v-model="form.difficulty" placeholder="请选择">
                <el-option
                  v-for="item in difficultyList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向" prop="direction" size="mini">
              <el-select v-model="form.direction" placeholder="请选择">
                <el-option
                  v-for="(item, index) in directionList"
                  :key="index"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人" prop="creatorID" size="mini">
              <el-select v-model="form.creatorID" placeholder="请选择">
                <el-option
                  v-for="item in usersSimpleList"
                  :key="item.value"
                  :label="item.username"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 搜索第三行 -->
        <el-row>
          <el-col :span="6">
            <el-form-item label="题目备注" prop="remarks">
              <el-input
                v-model="form.remarks"
                size="mini"
                style="width: 190px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称" prop="shortName">
              <el-input
                v-model="form.shortName"
                size="mini"
                style="width: 190px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div class="provCity">
              <el-form-item label="城市"></el-form-item>
              <el-form-item
                size="mini"
                style="width: 90px"
                label-width="0"
                prop="province"
                class="provinceSelect"
              >
                <el-select v-model="form.province" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in provincesList"
                    :key="index"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                size="mini"
                style="width: 90px"
                label-width="0"
                prop="city"
                class="citySelect"
              >
                <el-select v-model="form.city" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in citysList"
                    :key="index"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <!-- 清除和搜索按钮 -->
          <el-col :span="6">
            <el-row type="flex" justify="end">
              <el-button size="mini" style="width: 60px" @click="clearBtn"
                >清除</el-button
              >
              <el-button
                type="primary"
                size="mini"
                style="margin-right: 0"
                @click="searchBtn"
                >搜索</el-button
              >
            </el-row>
          </el-col>
        </el-row>
      </el-form>
      <!-- 标签页 -->
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first">
          <Table :list="allList" @update-page="getAllList"></Table>
        </el-tab-pane>
        <el-tab-pane label="待审核" name="second">
          <Table :list="uncheckedList" @update-page="getAllList"></Table>
        </el-tab-pane>
        <el-tab-pane label="已审核" name="third">
          <Table :list="checkedList" @update-page="getAllList"></Table>
        </el-tab-pane>
        <el-tab-pane label="已拒绝" name="fourth">
          <Table :list="refusedList" @update-page="getAllList"></Table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import Table from '../components/questions-choice-table.vue'
import { choice as getAllList } from '@/api/hmmm/questions'
import { simple as subjectsSimple } from '@/api/hmmm/subjects'
import { simple as directorysSimple } from '@/api/hmmm/directorys'
import { simple as tagsSimple } from '@/api/hmmm/tags'
import { simple as usersSimple } from '@/api/base/users'
import { questionType, difficulty, direction } from '@/api/hmmm/constants'
import { provinces, citys } from '@/api/hmmm/citys'

export default {
  components: {
    Table
  },
  data () {
    return {
      value: '',
      form: {
        subjectID: '',
        catalogID: '',
        tags: '',
        keyword: '',
        questionType: '',
        difficulty: '',
        direction: '',
        creatorID: '',
        remarks: '',
        shortName: '',
        province: '',
        city: '',
        provincesList: '',
        citysList: '',
        page: 1,
        pagesize: 5
      },
      activeName: 'first',
      // 学科简单列表
      subjectSimpleList: [],
      // 目录简单列表
      directorysSimpleList: [],
      // 标签简单列表
      tagsSimpleList: [],
      // 试题类型列表
      questionTypeList: questionType,
      // 难度列表
      difficultyList: difficulty,
      // 方向列表
      directionList: direction,
      // 录入人的简单列表
      usersSimpleList: [],
      // 城市列表
      provincesList: [],
      // 区域列表
      citysList: [],
      // 全部表格数据
      allList: [],
      // 待审核表格数据
      uncheckedList: [],
      // 已审核表格数据
      checkedList: [],
      // 已拒绝表格数据
      refusedList: [],
      // 判断表格是否显示
      isListShow: 0
    }
  },
  created () {
    // 获取学科的简单列表
    this.getSubjectSimpleList()
    // 获取录入人的简单列表
    this.getUsersSimple()
    // 获取城市列表
    this.getProvincesList()
    // 获取全部表格数据
    this.getAllList()
    // 获取后面三个表格数据
    this.getList()
  },
  methods: {
    // 获取学科的简单列表
    async getSubjectSimpleList () {
      // 获取学科前清空二级目录和标签的值
      this.form.catalogID = ''
      this.form.tags = ''
      const { data } = await subjectsSimple()
      this.subjectSimpleList = data
      // console.log(data)
    },
    // 获取录入人的简单列表
    async getUsersSimple () {
      const { data } = await usersSimple()
      this.usersSimpleList = data
    },
    // 获取城市列表
    getProvincesList () {
      this.provincesList = provinces()
    },
    // 清除按钮
    clearBtn () {
      this.$refs.form.resetFields()
    },
    // 搜索按钮
    async searchBtn () {
      // 筛选form中有值的属性
      const validForm = {}
      for (const key in this.form) {
        if (this.form[key] !== '' && this.form[key] !== []) {
          validForm[key] = this.form[key]
        }
      }
      console.log(validForm)
      const { data } = await getAllList(validForm)
      this.allList = data.items
    },
    // 切换选项卡
    handleClick (tab, event) {
      console.log(tab, event)
    },
    // 获取全部表格数据
    async getAllList () {
      const { data } = await getAllList()
      this.allList = data.items
    },
    // 获取后三个表格数据
    async getList () {
      const { data } = await getAllList()
      const list = data.items
      list.forEach(item => {
        if (item.chkState === 0) {
          this.uncheckedList.push(item)
        } else if (item.chkState === 1) {
          this.checkedList.push(item)
        } else {
          this.refusedList.push(item)
        }
      })
    }
  },
  watch: {
    form: {
      deep: true,
      async handler (newVal) {
        // 根据学科获取目录的简单列表
        const { data } = await directorysSimple(newVal.subjectID)
        this.directorysSimpleList = data
        // 根据学科获取标签的简单列表
        const { data: data1 } = await tagsSimple(newVal.subjectID)
        this.tagsSimpleList = data1
        // 根据城市获取区域名
        this.citysList = []
        this.citysList = citys(newVal.province)
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  padding: 20px;

  .provCity {
    display: flex;
    .provinceSelect,
    .citysSelect {
      .el-form-item__content {
        margin-left: unset;
      }
    }
    .provinceSelect {
      margin-right: 10px;
    }
  }
}
</style>
